<template>
    <button @click="show">打开模态框</button>
    <Teleport to="body">
        <div class="dialog" v-if="flag">
        <div class="close" @click="hide">&times;</div>
        <h5>模态框</h5>
        <div>模态框的内容</div>
        <div>模态框的内容</div>
        <div>模态框的内容</div>
        <div>模态框的内容</div>
        <div>模态框的内容</div>
        <div>模态框的内容</div>
        <div>模态框的内容</div>
        <div>模态框的内容</div>
        <div>模态框的内容</div>
    </div>
    </Teleport>
</template>

<script lang='ts' setup>
    import {ref} from 'vue'
    let flag=ref<boolean>(false)
    const show=()=>{
        flag.value=true
    }
    const hide=()=>{
        flag.value=false
    }
</script>

<style lang='scss' scoped>
    .dialog{
        position:absolute;
        left:50%;
        top:200px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        text-align: center;
        align-content: center;
        width: 200px;
        height: 250px;
        background-color:skyblue;
        border-radius: 15px;
        justify-content: center;
        .close{
            width: 15px;
            height:15px;
            top: 10px;
            background-color: yellow;
            position: absolute;
            right: 10px;
            line-height: 15px;
            text-align: center;
            cursor: pointer;
        }
    }
</style>